<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const input = ref('')
const input2 = ref('')
const value1 = ref('')
const value2 = ref('')
import type { TabsPaneContext } from 'element-plus'
import { getPubListByBrand } from '../../../../api/shouyePub.js'
import { useCounterStore } from "../../../../stores/counter"; //引入pinia
import { useRoute } from "vue-router"; //路由接收
import router from "@/router/index.js";  //路由传递

const store = useCounterStore();

import image1 from '../../../../assets/zgr/zoumadeng/10001.jpg';
import image2 from '../../../../assets/zgr/zoumadeng/10002.jpg';
import image3 from '../../../../assets/zgr/zoumadeng/10003.jpg';
import image4 from '../../../../assets/zgr/zoumadeng/10004.jpg';
import image5 from '../../../../assets/zgr/zoumadeng/10005.jpg';
import image6 from '../../../../assets/zgr/zoumadeng/10006.jpg';

const imageList = ref([
  image1,
  image2,
  image3,
  image4,
  image5,
  image6,
]);

//在pinia储存酒店起始时间
const PubStartTime = () => {
  store.setPubStartTime(value1.value)
}
//在pinia储存酒店结束时间
const PubEndTime = () => {
  store.setPubEndTime(value2.value)
}

const activeName = ref('35');
const activeNameOne = ref('all');

const area = ref([
  {id:'35',name:'烟台',value:'35'},
  {id:'36',name:'济南',value:'36'},
  {id:'37',name:'青岛',value:'37'},
  {id:'38',name:'临沂',value:'38'},
  {id:'39',name:'济宁',value:'39'},
]);
//brand为品牌
const brand = ref([
  {id:'34',name:'全部',value:'all'},
  {id:'40',name:'如家',value:'rj'},
  {id:'41',name:'汉庭',value:'ht'},
  {id:'42',name:'7天',value:'7t'}
])
let publist = ref([

])
//点击品牌获取酒店信息
const brandClick = async (tab: TabsPaneContext, event: Event) => {
  console.log(activeName.value)
  brandlist(activeName.value,tab.props.label)
}
//根据品牌获取酒店信息
const brandlist= async(area,brand) => {
  const res = await getPubListByBrand(area,brand)
  console.log(res)
  publist.value = res.data.data
}
//点击城市获取酒店信息
const areaClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name);
  byAreaBrandList(tab.props.name,'全部')
}
//根据区域获取酒店信息
const byAreaBrandList= async(area,brand) => {
  const res = await getPubListByBrand(area,brand)
  console.log(res)
  publist.value = res.data.data
}
//页面加载时获取全部酒店信息
onMounted(async ()=>{
  brandlist(35,'全部')
})

const search=()=>{
  PubStartTime()
  PubEndTime()
  //路由跳转
  router.push({
    path: '/JDXQ',
    query: {
      area: String(input.value), // 强制转换为字符串
    }
  })
}

const toJDXQ=(id)=>{
  console.log(id)
  //路由跳转
  router.push({
    path: '/JDXQYM',
    query: {
      id: id,
      checkIn: value2.value[0] || '', // 防止 undefined
      checkOut: value2.value[1] || ''
    }
  })
}

</script>

<template>
  <div class="all">
    <!--    搜索框第一部分-->
    <div class="first" style="width: 100%">
      <img src="../../../../assets/zgr/jdtomain/10002.png" alt="">
      <div class="sousuok">
        <div style="padding-top: 30px">
          <dl style="display: flex;" >
            <dt style="width: 50px;">目的地</dt>
            <span>
              <el-input v-model="input" style="width: 370px;height: 42px" placeholder="北京" />
            </span>
          </dl>
          <dl style="display: flex;margin-top: 30px">
            <dt style="width: 32px;margin-right:35px;">入住</dt>
            <span>
                    <el-date-picker
                        v-model="value1"
                        type="datetime"
                        placeholder="入住时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        style="width: 140px;height: 40px"
                    />
            </span>
            <dt style="margin-right:10px;margin-left: 10px" >离店</dt>
            <span>
                    <el-date-picker
                        v-model="value2"
                        type="datetime"
                        placeholder="离店时间"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        style="width: 160px;height: 40px"/>
            </span>
          </dl>
          <dl style="display: flex;margin-top: 30px">
            <dt style="width: 50px;">关键词</dt>
            <span>
              <el-input v-model="input2" style="width: 370px;height: 42px" placeholder="如位置/酒店名/品牌" />
            </span>
          </dl>
          <dl>
            <dt></dt>
            <dd>
              <el-button class="bt" @click="search">搜索</el-button>
            </dd>
          </dl>
        </div>
      </div>
    </div>

    <!--    酒店列表-->
    <div style="width: 1400px;margin: 0 auto">
      <div>
        <h1>酒店推荐</h1>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="areaClick" >
        <template>
          <el-tab-pane label="入住城市:">

          </el-tab-pane>
        </template>
        <el-tab-pane :label="item.name" :name="item.value" v-for="item in area" :key="item.id">
          <el-tabs v-model="activeNameOne" class="demo-tabs" @tab-click="brandClick">
            <template>
              <el-tab-pane label="经济连锁:">

              </el-tab-pane>
            </template>

            <el-tab-pane :label="item.name" :name="item.value" v-for="item in brand" :key="item.id"  >
              <div class="list">
                <div v-for="item in publist" :key="item.id" @click="toJDXQ(item.id)" >
                  <div class="img"><img :src="item.pubPath" alt=""></div>
                  <div class="name">{{item.address}}</div>
                  <div class="score">
                    <span>{{item.score}}分</span>
                    <span><span style="font-size: 13px">￥</span>{{item.price}}起</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <div>
            <p style="color: #F9749B;font-size: 20px">特惠酒店</p>
            <div>
              <div class="jdlist">
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_VzgDq80bbG.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_17T3uURF9wk.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_XBk92kype8.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_Wi1C21Ditq.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1BEGHizf8f6.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_Hb5eici8ow.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1pwIMou5pbW.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1v90zg4YW40.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>

              </div>
            </div>
            <p style="color: #FF9F35;font-size: 20px">高星酒店</p>
            <div>
              <div class="jdlist">
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1pQhrPHOSOc.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1k0Pq5aOayI.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1oNSQNFJHlS.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_INHYXGrRGo.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>

                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1bjIH3aUIcE.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1bShreT9h8A.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1n065HgIdX2.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>
                <div>
                  <div class="img">
                    <img src="https://pavo.elongstatic.com/i/Hotel600_320/nw_1az1FLeOjHq.jpg" alt="" width="340px" height="202  px">
                  </div>
                  <div class="name">喆啡酒店(北京王府井大街协和医院店)</div>
                  <div class="score">
                    <span>4.8分</span>
                    <span><span style="font-size: 13px">￥</span>365起</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>

    </div>



    <!--    目的地推荐-->
    <div style="margin: 0 auto; width: 1400px;">
      <h1 style=" color: #84C423;border-bottom: 3px solid #84C423">目的地推荐</h1>
      <div class="mddtj">
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: -1px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: -1px;top: -451px;">
          </div>
          <div class="ul352"><h3>赏花</h3>
            <ul>
              <li>北京</li>
              <li>武汉</li>
              <li>婺源</li>
              <li>汉中</li>
              <li>罗平</li>
              <li>洛阳</li>
              <li>苏州</li>
              <li>杭州</li>
              <li>林芝</li>
            </ul>
          </div>
        </div>
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 84px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 84px;top: -451px;">
          </div>
          <div class="ul352"><h3>天然氧吧</h3>
            <ul>
              <li>拉萨</li>
              <li>大理</li>
              <li>舟山</li>
              <li>厦门</li>
              <li>昆明</li>
              <li>绵阳</li>
              <li>黄山</li>
              <li>三亚</li>
            </ul>
          </div>
        </div>
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 169px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 169px;top: -451px;">
          </div>
          <div class="ul352"><h3>古镇</h3>
            <ul>
              <li>乌镇</li>
              <li>同里</li>
              <li>周庄</li>
              <li>西递宏村</li>
              <li>丽江</li>
              <li>黄姚</li>
              <li>南浔</li>
              <li>平遥</li>
              <li>凤凰</li>
            </ul>
          </div>
        </div>
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 254px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 254px;top: -451px;">
          </div>
          <div class="ul352"><h3>世界遗产</h3>
            <ul>
              <li>九寨沟</li>
              <li>泰山</li>
              <li>青城山</li>
              <li>武当山</li>
              <li>莫高窟</li>
              <li>西安</li>
              <li>安阳殷墟</li>
              <li>元阳梯田</li>
            </ul>
          </div>
        </div>
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 339px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 339px;top: -451px;">
          </div>
          <div class="ul352"><h3>登山</h3>
            <ul>
              <li>泰山</li>
              <li>黄山</li>
              <li>长白山</li>
              <li>武当山</li>
              <li>普陀山</li>
              <li>五台山</li>
              <li>恒山</li>
            </ul>
          </div>
        </div>
        <div class="fontright">
          <div class="tp80">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 424px;top: 1px;">
            <img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="right: 424px;top: -451px;">
          </div>
          <div class="ul352"><h3> 温泉</h3>
            <ul>
              <li>内蒙阿尔山</li>
              <li>东北长白山</li>
              <li>云南腾冲热海</li>
              <li>西藏羊八井</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--走马灯部分-->
    <div style="height:260px;width: 1000px; margin: 0 auto">
      <!-- 轮播组件，设置轮播间隔为 4000 毫秒，卡片类型，高度为 200px -->
      <el-carousel :interval="4000" type="card" height="260px">
        <!-- 遍历图片数组，为每个图片创建一个轮播项 -->
        <el-carousel-item v-for="(image, index) in imageList" :key="index">
          <!-- 显示图片，设置图片宽度和高度为 100%，并覆盖整个容器 -->
          <img :src="image" alt="carousel-image" style="width:525px; height:260px; object-fit: cover;">
        </el-carousel-item>
      </el-carousel>
    </div>


    <!--    推荐品牌-->
    <div style="width: 1400px;height:336px;margin: 0 auto">
      <h1 style="border-bottom: 3px solid #44A6FF;color: #44A6FF;margin-bottom: 20px">推荐品牌</h1>
      <div class="tjpp">
        <ul>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 442px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 676px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 790px;top: -84px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="top: -84px; ">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="    right: 113px;
    top: -168px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="top: -175px;right: 5px">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 337px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 343px;
    top: -172px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="    right: 562px;
    top: -173px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 223px; top:-173px">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 455px; top: -173px">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="   right: 562px;
    top: -82px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right:5px">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 682px;
    top: -88px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="    right: 343px;
    top: -82px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
          <li>
            <div>
              <img src="../../../../assets/zgr/tjpp/logos.png" alt=""style="right: 563px;">
            </div>
            <p>洲际酒店集团</p>
          </li>
        </ul>
      </div>
    </div>


    <!--end服务-->
    <div style="width: 1400px;height: 100px;margin: 0 auto;margin-top: 40px;" class="end-date">
      <div><div style="width: 60px;height: 60px;overflow: hidden"><img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="position:relative;right: 286px;top: -218px;"></div><span>全球100万家酒店</span></div>
      <div><div style="width: 60px;height: 60px;overflow: hidden"><img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="position:relative;right: 354px;top: -218px;"></div><span>全球100万家酒店</span></div>
      <div><div style="width: 60px;height: 60px;overflow: hidden"><img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="position:relative;right: 423px;top: -218px;"></div><span>全球100万家酒店</span></div>
      <div><div style="width: 60px;height: 60px;overflow: hidden"><img src="../../../../assets/zgr/tjpp/7bec9601-f8aa-4782-ac80-0f007acb2ff1.png" alt="" style="position:relative;right: 490px;top: -220px;"></div><span>全球100万家酒店</span></div>
    </div>



  </div>




</template>

<style scoped lang="scss">

.demo-tabs > .el-tabs__content {
  padding: 0 !important;

}
:deep(#tab-0){
  color: #44A6FF;font-size: 20px
}
:deep(#tab-0:hover){
   color: #44A6FF !important;
}


/*目的地推荐*/
.fontright>div{
  display: inline-block;
}
.ul352{
  display: inline-block;
  float: right;
}
.ul352 h3{
  margin-top: 15px;
  color: #84C423;
}
.ul352 ul{
  width: 352px;
  height:52px;

}
.ul352 ul li{
  display: inline-block;
  height: 22px;
  margin-right:23px;
}
.tp80{
  width: 82px;
  height: 82px;
  overflow: hidden;
  margin-top: 15px;
  margin-left: 10px;
}
.tp80 img{
  position:relative;

}


.tp80 {
  position: relative;
  overflow: hidden;
}

.tp80 img {
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.tp80 img:last-child {
  opacity: 0;
}

.tp80:hover img:first-child {
  opacity: 0;
}

.tp80:hover img:last-child {
  opacity: 1;
}
/*end服务*/
.end-date div{
  display: inline-block;
  width: 25%;
  line-height: 100px;
}
.end-date div span{
  position: relative;
  left: 122px;
  top: -22px;
}
.end-date div div{
  position: relative;
  left: 69px;
  top: -3px;
}
/*推荐品牌*/
.tjpp>ul li{
  width:173px;
  height: 140px;
  display: inline-block;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.tjpp>ul li:hover{
  border: 1px solid orange;
}

.tjpp>ul li div{
  width:110px;
  height: 80px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 5px;
}
.tjpp>ul li div img{
  position:relative;
}
/*轮播图*/

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 260px;
  margin: 0;
  text-align: center;
}
.el-carousel__item {
  width: 525px;
  height: 260px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
/* 为图片添加样式，确保图片正常显示 */
.el-carousel__item img {
  display: block;
}


/*第三部分*/
.mddtj{
  margin:0 auto;
  width: 1400px;
  height: 220px;
  margin-bottom: 30px;
}
.mddtj>div{
  width:463px;
  height: 111px;
  display: inline-block;
  border-right: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;

}

/*第二部分*/
.jdlist{
  width:1400px;
  height: 540px;
  flex: auto;
}
.list>div:hover{
  background: rgba(196,196,196,0.48);
}
.list>div{
  width: 340px;
  display: inline-block;
  margin-right: 13px;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s;
  .img{
    position: relative;
    top: -10px;
    display: block;
    padding: 17px 8px 0px;
    overflow: hidden;
    box-sizing: border-box;
    img{
      height: 180px;
      width: 100%;
      border-radius: 5px;

    }
  }
  .name{
    color: #333;
    font-size: 16px;
    line-height: 16px;
    overflow: hidden;
    padding: 10px 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .score{
    height: 20px;
    padding: 0 16px 14px;
    display: flex;
    justify-content: space-between;
    span{
      color: #ff7800;
      font-size: 14px;
      line-height: 20px;
    }
  }
}

.list>div:nth-of-type(4n){
  margin-right: 0px;
}
.score>span:nth-of-type(1){
  color: #ff7800;
}

.score>span:nth-of-type(2){
  float: right;
  color: #ff7800;

}
.jdlist>div{
  width:340px;
  height:250px;
  display: inline-block;
  margin-right: 10px;
}
el-tab-pane p:nth-of-type(1){
  color: #44A6FF;font-size: 20px
}
el-tab-pane p:nth-of-type(2){
  color: #F9749B;font-size: 20px
}
el-tab-pane p:nth-of-type(3){
  color: #FF9F35;font-size: 20px
}



/*第一部分*/

.all{
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;

}
.first{
  width: 1920px;
  height: 380px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.sousuok{
  width: 1400px;
  height:380px;
  position: absolute;
  margin-top:50px;

}
.sousuok div{
  width: 460px;
  height: 270px;
  background: white;
  border-radius: 5px;
  padding-left: 15px;
}
dt{
  text-align: center;
  align-content: center;
}
.bt{
  width: 240px;
  height: 46px;
  background-color:#FF7800;
  border: none;
  color: white;
  font-size: 20px;
  margin-top: 20px;
  margin-left: 65px;
}
.bt:hover{
  background-color: #FF6A00;
}
</style>